<template>
    <div class="box">
        <header class="wzt-head">
            <i @click="toBack()" class="wzticon iconfont icon-jiantou"></i>
            <span>一键划转</span>
        </header>
        <!-- 输入划转表单 -->
        <div v-if="showType===1" class="form">
            <div class="item">
                <div class="title">转账地址</div>
                <div>
                    <input type="text" v-model="form.address" placeholder="请输入转账地址（UID）" />
                </div>
            </div>
            <div class="item">
                <div class="title">转账金额</div>
                <div class="bottom">
                    <input type="text" v-model="form.amount" placeholder="0.00" />
                    <div class="unit">SQT</div>
                </div>
            </div>
            <div class="footer">
                剩余{{sqt_balance}}<span class="out-btn" @click="outAllSQT">全部转出</span>
            </div>
        </div>
        <!-- 确认表单 -->
        <div v-else-if="showType===2" class="confirm">
            <p class="top">
                <span class="amount">{{form.amount}}</span>
                <span class="unit">SQT</span>
            </p>
            <div class="contant">
                <div class="item">
                    <div class="key">转账地址</div>
                    <div class="value">{{form.address}}</div>
                </div>
                <div class="item">
                    <div class="key">转账金额</div>
                    <div class="value">{{form.amount}}<span class="unit">SQT</span></div>
                </div>
            </div>
        </div>
        <!-- 划转详情 -->
        <div v-else-if="showType===3" class="success">
            <div class="top">
                <div class="state">
                    <img src="../../assets/img/transfer-icon-success.png" class="img">
                    <span>转账成功</span>
                </div>
                <div class="tit">
                    <span class="amount">{{successForm?successForm.payNumber:0}}</span>
                    <span class="unit">SQT</span>
                </div>
            </div>
            <div class="contant" v-if="successForm">
                <div class="item">
                    <div class="key">到账地址</div>
                    <div class="value">{{successForm.uid}}</div>
                </div>

                <div class="item">
                    <div class="key">到账金额</div>
                    <div class="value">{{successForm.payNumber}}<span class="unit">SQT</span></div>
                </div>
                <div class="item">
                    <div class="key">到账时间</div>
                    <div class="value">{{successForm.createTime}}</div>
                </div>
            </div>
        </div>
        <!-- 请输入支付密码 -->
        <div v-if="showModel" class="payPassword">
            <div class="model">
                <div class="title">请输入支付密码</div>
                <div class="content">
                    <div class="item" :class="{'active':payPassword.length>=val}" v-for="val in 6" :key="val" @click="showKeyboard=true">*</div>
                </div>
                <img src="../../assets/img/layer-icon-close.png" class="img" @click="closeModel">
            </div>
            <van-number-keyboard :show="showKeyboard" @input="onInput" @delete="onDelete" />
        </div>
        <button v-if="showType!==3" v-show="!showModel" class="sub-btn" @click="submit">{{showType==1?"确定":"划转"}}</button>
        <div v-if="isLoading" class="loading">
            <van-loading size="24px" ></van-loading>
        </div>
    </div>

</template>

<script>
    import {
        NumberKeyboard,
        Toast,
        Loading
    } from 'vant';
    export default {
        name: "transfer",
        data() {
            return {
                userId: "",
                sqt_balance: 0,
                showType: 1,
                showKeyboard: false,
                showModel: false,
                isLoading: false,
                payPassword: "",
                successForm: undefined,
                form: {
                    address: "",
                    amount: ""
                },
            }
        },
        components: {
            [NumberKeyboard.name]: NumberKeyboard,
            [Loading.name]: Loading
        },
        mounted() {
            this.userId = localStorage.getItem('user_id');
            this.initData();
            window.noBack = this.toBack.bind(this);
        },
        methods: {
            // 初始化数据
            initData() {
                this.getBalance();
            },
            closeModel() {
                this.showModel = false;
                this.showKeyboard = false;
            },
            onInput(key) {
                if (this.payPassword.length === 6) {
                    return;
                }
                this.payPassword = (this.payPassword + key).slice(0, 6);
                if (this.payPassword.length === 6) {
                    this.isLoading = true;
                    this.$http.post(`${this.utils.config}/netmall/app/person/api/payPwdConfirm?password=${this.payPassword}&user_id=${this.userId}`).then((res) => {
                        this.payPassword = "";
                        if (res.data.success) {
                            this.transferSQT2Exchange();
                        } else {
                            this.isLoading = false;
                            Toast(res.data.message);
                        }
                    });
                }
            },
            transferSQT2Exchange() {
                this.$http.post(`${this.utils.config}/netmall/app/person/api/transferSQT2Exchange?uid=${this.form.address}&transferNum=${this.form.amount}&user_id=${this.userId}`).then((res) => {
                    this.isLoading = false;
                    if (res.data.success) {
                        this.successForm = res.data.result;

                        this.showModel = false;
                        this.showKeyboard = false;
                        this.payPassword = "";
                        this.form.address = "";
                        this.form.amount = "";
                        this.getBalance();

                        this.showType = 3;
                    } else {
                        Toast(res.data.message);
                    }
                });
            },

            onDelete() {
                this.payPassword = this.payPassword.slice(0, this.payPassword.length - 1);
            },
            // 提交
            submit() {
                switch (this.showType) {
                    case 1:
                        if (!this.form.address) {
                            Toast("请输入转账地址（UID）");
                            return;
                        } else if (this.form.amount == "") {
                            Toast("请输入转账金额");
                            return;
                        } else if (typeof Number(this.form.amount) !== "number") {
                            Toast("转账金额格式不正确");
                            return;
                        } else if (Number(this.form.amount) > this.sqt_balance) {
                            Toast("金额不足");
                            return;
                        }

                        this.showType = 2;
                        break;
                    case 2:
                        this.payPassword = "";
                        this.showKeyboard = true;
                        this.showModel = true;
                        break;
                    default:
                        this.showType = 1;
                        break;
                }
            },
            // 全部转出
            outAllSQT() {
                this.form.amount = this.sqt_balance;
            },
            // 返回
            toBack() {
                switch (this.showType) {
                    case 3:
                        this.showType = 2;
                        break;
                    case 2:
                        if (this.showModel) {
                            this.showKeyboard = false;
                            this.showModel = false;
                        } else {
                            this.showType = 1;
                        }
                        break;
                    case 1:
                        window.noBack = false;
                        this.$router.go(-1);
                        break;
                    default:
                        this.showType = 1;
                        break;
                }

            },
            // 获取现有余额
            getBalance() {
                this.$http.post(`${this.utils.config}/netmall/app/person/api/getPersonCenterData?user_id=${this.userId}`, {
                    user_id: this.userId
                }).then((data) => {
                    this.sqt_balance = data.data.result.tbUserSqt.balance;
                })
            }
        }
    }
</script>

<style scoped>
    @import "../../assets/font/iconfont.css";

    .loading {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.8);
        width: 100px;
        height: 100px;
    }

    .success .contant .item:last-child {
        border-bottom: 0;
    }

    .success .contant .item {
        width: 95%;
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        margin: auto;
        font-size: 14px;
        border-bottom: 1px solid #EDEDED;
    }

    .success .contant .item .key {
        color: #333;
        font-weight: bold;
    }

    .success .contant .item .value {
        color: #888;
    }

    .success .contant .item .unit {
        margin-left: 4px;
    }

    .success .top {
        width: 100%;
        margin: 124px 0 20px;
        color: #888;
        text-align: center;
    }

    .success .top .state {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 14px;
    }

    .success .top .state .img {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
    }

    .success .top .tit {
        width: 100%;
        margin: 22px 0 40px;
        color: #FF2E67;
        text-align: center;
    }

    .success .top .amount {
        font-size: 30px;
        font-weight: bold;
        margin-right: 4px;
    }

    .success .top .unit {
        font-size: 14px;
        vertical-align: baseline;
    }

    .payPassword .model {
        background-color: #fff;
        width: 72vw;
        height: 46vw;
        padding: 20px;
        border-radius: 14px;
        box-sizing: border-box;
        position: relative;
    }

    .payPassword .model .title {
        color: #000;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        margin-top: 3vw;
    }

    .payPassword .model .content .active {
        color: #FF2E67;
    }

    .payPassword .model .img {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 15px;
        left: 15px;
    }

    .payPassword .model .content {
        display: flex;
        margin: 13vw 20px 0;
        display: flex;
        justify-content: space-around;
        font-size: 22px;
        color: #888;
    }

    .payPassword {
        height: 100vh;
        width: 100vw;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.1);
    }

    .confirm .contant .item:nth-child(1) {
        border-bottom: 1px solid #EDEDED;
    }

    .confirm .contant .item {
        width: 95%;
        display: flex;
        justify-content: space-between;
        padding: 20px 0;
        margin: auto;
        font-size: 14px;
    }

    .confirm .contant .item .key {
        color: #333;
        font-weight: bold;
    }

    .confirm .contant .item .value {
        color: #888;
    }

    .confirm .contant .item .unit {
        margin-left: 4px;
    }

    .confirm .top {
        width: 100%;
        margin: 132px 0 20px;
        color: #FF2E67;
        text-align: center;
    }

    .confirm .top .amount {
        font-size: 30px;
        font-weight: bold;
        margin-right: 4px;
    }

    .confirm .top .unit {
        font-size: 14px;
        vertical-align: baseline;
    }

    .sub-btn {
        position: fixed;
        bottom: 20px;
        left: 0;
        right: 0;
        background-image: linear-gradient(to right, #FF5AA0, #FF2E67);
        margin: 0 auto;
        width: 95%;
        color: #fff;
        border: 0;
        border-radius: 4px;
        height: 45px;
        line-height: 45px;
    }

    .form {
        width: 100%;
        padding: 0 15px;
        font-size: 16px;
        margin-top: 126px;
    }

    .form .footer {
        width: 100%;
        text-align: right;
        color: #888;
        font-size: 12px;
    }

    .form .footer .out-btn {
        margin-left: 15px;
        color: #FF2E67;
    }

    .form .item {
        margin-bottom: 20px;
        padding-bottom: 11px;
        border-bottom: 1px solid #EDEDED;
    }

    .form .item .bottom {
        display: flex;
    }

    .form .item .bottom .unit {
        font-weight: bold;
        align-items: center;
    }

    .form .item .title {
        font-size: 12px;
        color: #888;
        margin-bottom: 20px;
    }

    .form .item input {
        width: 100%;
        border: 0;
        padding: 0;
        height: 24px;
        line-height: 24px;
    }

    .form .item input::placeholder {
        color: #DBDBDB;
    }

    .form .item:nth-child(2) input::placeholder {
        font-size: 24px;
    }

    .wzt-head {
        width: 100vw;
        text-align: center;
        position: fixed;
        height: 41px;
        line-height: 41px;
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333;
    }

    .wzticon {
        font-size: 18px;
        font-weight: 900;
        display: inline-block;
        position: absolute;
        left: 16px;
    }

    .box {
        background: #fff;
        min-height: 100vh;
        overflow: hidden;
    }
</style>